<template>
    <el-dialog
        :title="'实有人口'"
        :close-on-click-modal="false"
        :visible.sync="visible"
        :modal-append-to-body='false'
        :modal='false'>
      <el-form :inline="true" :model="dataForm">
        <el-form-item>
          <el-input v-model="dataForm.name" placeholder="请输入姓名后点击查询" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="dataForm.idcard" placeholder="请输入身份证号后点击查询" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button  type="primary" @click="getDataList(houseEstateId)" plain >{{ $t('handle.search') }}</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="dataList"
        border
        v-loading="dataListLoading"
        @selection-change="selectionChangeHandle"
        style="width: 100%;">
        <!-- <el-table-column
            type="selection"
            header-align="center"
            align="center"
            width="50">
        </el-table-column> -->
        <el-table-column
            type="index"
           :label="$t('tabble.No')"
            width="50"
            :index="indexMethod">
        </el-table-column>
        <el-table-column
            prop="name"
            header-align="center"
            align="center"
            :label="$t('form.name')">
        </el-table-column>
        <el-table-column
            :show-overflow-tooltip="true"
            prop="identificationNumber"
            header-align="center"
            align="center"
            label="身份证号">
        </el-table-column>
        <el-table-column
            prop="sex"
            header-align="center"
            align="center"
           :label="$t('form.sex')">
            <template slot-scope="scope">
                <span>{{sexFilter(scope.row.sex)}}</span>
            </template>
        </el-table-column>
        <el-table-column
            prop="nation"
            header-align="center"
            align="center"
            label="民族">
            <template slot-scope="scope">
                <span>{{nationFilter(scope.row.nation)}}</span>
            </template>
        </el-table-column>
        <el-table-column
            prop="birthdate"
            header-align="center"
            align="center"
            :label="$t('form.birthDate')">
        </el-table-column>
        <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            width="150"
            :label="$t('handle.handle')">
            <template slot-scope="scope">
              <el-button  type="text" size="small" @click="info(scope.row.populationCoding,scope.row.name)" >选择</el-button>
            </template>
        </el-table-column>
      </el-table>
        <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
  </el-dialog>
</template>
<script>
export default {
  data(){
    return {
      houseEstateId:"",
      visible: false,
      dataForm: {

      },
      sexDicts: [],
      sexDictType: {
          1:'男'
      },
      nationDicts: [],
      nationDictType: {
          1: '汉族'
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      show: false,
      headImage: '',
      imageId: ''
    }
  },
  computed: {
     sexFilter() {
         return function(type){
             return this.sexDictType[type]
         }
     },
     nationFilter(){
         return function(type){
             return this.nationDictType[type]
         }
     }
  },
  created (){
      // this.getDataList()
      this.getSex()
      this.getNation()
  },
  methods: {
    getNation(){
        this.$http({
            url: 'dg-standard-info/common/dgbasedictionary/dictlist/nation',
            method: 'get'
            }).then(({data})=>{
                if(data && data.code === 0){
                this.nationDicts = data.dictList;
                for(let i = 0; i < data.dictList.length; i++){
                    this.nationDictType[data.dictList[i].value] = data.dictList[i].label;
                };
            }
        })
    },
    getSex(){
        this.$http({
            url: 'dg-standard-info/common/dgbasedictionary/dictlist/sex',
            method: 'get'
            }).then(({data})=>{
                if(data && data.code === 0){
                this.sexDicts = data.dictList;
                for(let i = 0; i < data.dictList.length; i++){
                    this.sexDictType[data.dictList[i].value] = data.dictList[i].label;
                };
            }
        })
    },
    init(houseEstateId){
          this.show = true
          this.visible = true
          this.houseEstateId = houseEstateId
    },
    indexMethod(index){
            return index+1
    },
     // 每页数
    sizeChangeHandle(val){
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList(this.houseEstateId)
    },
      // 当前页
    currentChangeHandle(val){
        this.pageIndex = val
        this.getDataList(this.houseEstateId)
    },
    // 多选
    selectionChangeHandle(val){
        this.dataListSelections = val
    },
    getDataList(houseEstateId){
      this.dataListLoading = true
      this.$http({
          url: `/dg-standard-info/dgactualpopulation/list`,
          method: 'post',
          params:{
            page: this.pageIndex,
            limit: this.pageSize,
            regionPid:houseEstateId,
            name: this.dataForm.name,
            idcard: this.dataForm.idcard
            }
      }).then(({data})=>{
          // this.dataForm.name = ''
          // this.dataForm.idcard= ''
          if(data && data.code === 0){
              this.dataList = data.page.list
              this.totalPage = data.page.totalCount
          }else{
              this.dataList = []
              this.totalPage = 0
          }
          this.dataListLoading = false
      })
    },
    info(populationCoding,name){
        this.visible = false
        this.$emit('infoMess',populationCoding,name)
        //  this.$http({
        //     // url: `/dg-standard-info/standardinfo/dgbasicportrait/info/${this.imageId}`,
        //     url:`/dg-standard-info/standardinfo/dgactualpopulation/info/`+populationCoding,
        //     method: 'get'
        //     }).then(({data})=>{
        //         console.log('data',data)
        //         if(data && data.code === 0){
        //             this.headImage = data.dgActualPopulation.photoUrl
        //             this.$emit('infoMess',data.dgActualPopulation.populationCoding,data.dgActualPopulation.name)
        //         }
        //     })
    }
  }
}
</script>
